<template>
    <view class="page-content">
        <sub-navbar title="地址管理"></sub-navbar>
        <view class="main-view">
            <view v-if="addressList.length > 0"> 
                <z-paging ref="paging" :fixed="false" v-model="addressList" @query="queryList">
                    <view class="item-box" v-for="(item, index) in addressList" :key="index">
                        <up-swipe-action duration="500">
                            <up-swipe-action-item :options="options" @click="handleRemove(index)">
                                <view class="item-info">
                                    <view class="info-view">
                                        <text>张三三</text>
                                        <text style="margin-left: 10rpx;">15370226969</text>
                                    </view>
                                    <view class="address-view">江苏省-无锡市-惠山区 惠山大道112号</view>
                                </view>
                                <view class="item-bot">
                                    <view class="left-view" @click="defaultIndex = index">
                                        <view class="checkBox" :class="{'act-checkBox': index == defaultIndex}"  >
                                            <up-icon name="checkbox-mark" color="#FFFFFF" size="16" v-if="index == defaultIndex"></up-icon>   
                                        </view>
                                        <text>设为默认地址</text>
                                    </view>
                                    <view class="right-view">
                                        <up-icon name="edit-pen-fill" color="#2979ff" size="18"></up-icon>
                                        <text>编辑</text>
                                    </view>
                                </view>
                            </up-swipe-action-item>
                        </up-swipe-action>  
                    </view> 
                </z-paging>    
            </view>

            <view class="empty-view"  v-else>
                <sub-empty mode="address" :isShowBtn="true" btnText="添加地址" @handleClick="handleClick"></sub-empty>
            </view> 
        </view>

        <view class="bot-view" v-if="addressList.length > 0">
            <view class="btn-view" @handleClick="handleClick">
                <text>添加地址</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const paging = ref<any>(null);
const addressList = ref([]);
const options = reactive([
    {
        text: '删除',
        style: {
            backgroundColor: '#dd524d'
        }
    } 
])
const defaultIndex = ref(0);
const handleClick = () => {
    uni.navigateTo({
        url: "/subPackage/pages/changeAddress/index?type=0"
    })
}

const handleRemove = (index: number) => {
    console.log("444", index)
}

const queryList = (pageNo, pageSize) => {
    paging.value.complete(['', '']);
        // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
        // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
        // request.queryList({ pageNo,pageSize }).then(res => {
        // 	// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
        //     paging.value.complete(res.data.list);
        // }).catch(res => {
        // 	// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
        // 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        // 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        // 	paging.value.complete(false);
        // })
    }



</script>

<style lang="scss" scoped>
.main-view{
    flex: 1;
    overflow-y: auto;
    background-color: $uni-bg-color-grey;
    padding: 25rpx 0;
    .item-box{
        background-color: #FFFFFF;
        padding-left: 25rpx;
        margin-bottom: 25rpx;
        overflow: hidden;
        ::v-deep .u-swipe-action-item__right{
            top: 2rpx;
            bottom: 2rpx;
            right: 2rpx;
        }
        .item-info{
            padding: 20rpx 0 20rpx 25rpx;
            margin-right: 25rpx;
            border-bottom: 1rpx dashed $uni-border-color;
            .info-view{
                width: 100%;
                margin-bottom: 10rpx;
            }
            .address-view{
                font-size: 28rpx;
            }
        }
        .item-bot{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 25rpx;
            font-size: 28rpx;
            color: $uni-text-color-grey;
            .left-view{
                display: flex;
                align-items: center;
                .checkBox{
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 100%;
                    border: 1rpx solid $uni-border-color;
                    margin-right: 10rpx;
                    &.act-checkBox{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: $uni-color-primary;
                        border: 1rpx solid $uni-color-primary;
                    }
                }
            }
            .right-view{
                display: flex;
                align-items: center;
                margin-right: 20rpx;
            }
        }
    }
    .empty-view{
        width: 100%;
        padding-top: 200rpx;
        display: flex;
        justify-content: center;
    }
}
.bot-view{
    width: 100%;
    height: 90rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .btn-view{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $uni-color-error;
        color: #FFFFFF;
    }
}
</style>